---
title: "Button"
sidebarTitle: "Button"
description: "A link that is styled to look like a button."
"og:image": "https://react.email/static/covers/button.png"
icon: "b"
---

import Support from '/snippets/support.mdx'

<Info>
  Semantics: Quite often in the email world we talk about buttons, when actually
  we mean links. Behind the scenes this is a `<a>` tag, that is styled like a `<button>` tag.
</Info>

## Install

Install component from your command line.

<CodeGroup>

```sh npm
npm install @react-email/components -E

# or get the individual package

npm install @react-email/button -E
```

```sh yarn
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/button -E
```

```sh pnpm
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/button -E
```

</CodeGroup>

## Getting started

Add the component to your email template. Include styles where needed.

```jsx
import { Button } from "@react-email/components";

const Email = () => {
  return (
    <Button
      href="https://example.com"
      style={{ color: "#61dafb", padding: "10px 20px" }}
    >
      Click me
    </Button>
  );
};
```

## Props

<ResponseField name="href" type="string" required>
  Link to be triggered when the button is clicked
</ResponseField>

<ResponseField name="target" type="string" default="_blank">
  Specify the target attribute for the button link
</ResponseField>

<Support/>
